<script setup lang="ts">
import { defineEmits } from "vue";
import { list, tableList } from "../secondStep/data";
let $emit = defineEmits(["submitClick"]);
const props = defineProps({
  show: {
    type: Boolean,
    default: false
  }
});
import { useRouter } from "vue-router";
const router = useRouter();
import Descriptions from "./descriptions.vue";
const columns = [
  {
    label: "活动名称",
    prop: "name",
    align: "center"
  },
  {
    label: "活动内容",
    prop: "connect",
    align: "center"
  },
  {
    label: "负责人",
    prop: "person",
    align: "center"
  },
  {
    label: "开展时间",
    prop: "time",
    align: "center",
    slot: "time"
  },
  {
    label: "收益人群",
    prop: "people",
    align: "center"
  }
];
import Explains from "../thirdStep/tabletitle.vue";
</script>

<template>
  <div class="pl-[10px] headerTitle"><span></span>基本信息</div>
  <div class="p-[20px] pt-0">
    <el-descriptions title="" :column="2" border>
      <el-descriptions-item label="资助项目名称" width="150"
        >杭州青青草公益服务中心
      </el-descriptions-item>
      <el-descriptions-item label="资方类型" width="150"
        >民政</el-descriptions-item
      >
      <el-descriptions-item label="资助方名称" width="150"
        >XXXX民政局</el-descriptions-item
      >
      <el-descriptions-item label="资方联系人和电话" width="150"
        >孙一一，135XXXXXXXX</el-descriptions-item
      >
      <el-descriptions-item label="项目负责人" width="150"
        >孙小小</el-descriptions-item
      >
      <el-descriptions-item label="项目负责人联系方式" width="150"
        >139XXXXXXXX</el-descriptions-item
      >
      <el-descriptions-item label="项目名称" width="150"
        >社区邻里国际共融服务项目</el-descriptions-item
      >
      <el-descriptions-item label="申报项目编号" width="150"
        >XSSDSDSDSD</el-descriptions-item
      >
      <el-descriptions-item label="项目周期" width="150"
        >2024-04-23至2024-10-23</el-descriptions-item
      >
      <el-descriptions-item label="受益人数" width="150"
        >1000</el-descriptions-item
      >
      <el-descriptions-item label="实施地点" width="150">
        <el-tag class="mx-1" type="success"
          >浙江省/杭州市/滨江区/长河街道</el-tag
        >
        <el-tag class="mx-1" type="success"
          >浙江省/杭州市/滨江区/长河街道</el-tag
        >
      </el-descriptions-item>
      <el-descriptions-item label="自定义标签" width="150">
        <el-tag class="mx-1" type="success">公益创投</el-tag>
        <el-tag class="mx-1" type="success">扶幼助困</el-tag>
      </el-descriptions-item>
      <el-descriptions-item label="项目概述" width="150" :span="2"
        >各区、县（市）民政局，钱塘区、西湖风景名胜区社发局，各有关社会组织：
        为培育发展社会组织，充分引导社会组织在助力经济发展、推进乡村振兴、促进稳岗就业、提供“一老一小”服务、参与第三次分配等工作中发挥积极作用，根据《民政部关于民政部门利用福利彩票公益金向社会力量购买服务的指导意见》《浙江省关于促进社会组织高质量发展 助力共同富裕示范区建设的意见》《杭州市关于促进公益性社会组织发展的实施意见》和《杭州市公益创投项目管理办法》等文件要求，现就做好杭州青青草公益服务中心
        申报工作通知如下：</el-descriptions-item
      >
    </el-descriptions>
  </div>
  <div class="pl-[10px] headerTitle"><span></span> 项目详情</div>
  <div class="p-[20px] pt-0">
    <Descriptions :lists="list" />
  </div>

  <div class="pl-[10px] headerTitle"><span></span>项目产出清单</div>
  <div class="p-[20px] pt-0 mt-[20px]">
    <template v-for="item in tableList">
      <Explains
        :title="item.title"
        :contont="item.contont"
        :num="item.num"
        :show="item.show"
        hide
        class="!mb-[20px]"
      >
        <div class="ml-[20px] text-[14px] mt-[20px] font-bold">
          项目实施方案
        </div>

        <pure-table
          class="mt-[20px]"
          :data="item.tableData"
          :columns="columns"
          stripe
          border
          :header-cell-style="{
            textAlign: 'center',
            background: '#f5f7fa'
          }"
        >
          <template #time="{ row }">
            {{ row.time ? row.time.join("至") : "" }}
          </template>
          <template #sort="{ row }">
            {{ row.sort == 1 ? "社区服务类" : "为老服务类" }}
          </template>
          <template #status="{ row }">
            <el-tag type="success" v-if="row.status == 1">完成</el-tag>
            <el-tag type="primary" v-else-if="row.status == 2">进行中</el-tag>
            <el-tag type="info" v-else>未开始</el-tag>
          </template>
        </pure-table>
      </Explains>
    </template>
  </div>

  <div v-if="!props.show">
    <div
      class="flex justify-center m-[10px] w-full p-[20px] bg-white shadow shadow-zinc-200 -left-[10px] relative"
    >
      <el-button @click="router.push({ name: 'projectApplication' })"
        >取消</el-button
      >
      <el-button @click="router.push({ name: 'projectApplication' })"
        >保存草稿</el-button
      >
      <el-button type="primary" @click="$emit('submitClick', 3)"
        >下一步</el-button
      >
      <el-button type="primary" @click="$emit('submitClick', 5)"
        >提交</el-button
      >
    </div>
  </div>
</template>

<style lang="scss" scoped>
.headerTitle {
  content: " ";
  position: relative;
  border-bottom: 1px solid #eee;
  line-height: 48px;
  span {
    width: 4px;
    height: 15px;
    background: #409eff;
    position: absolute;
    top: 50%;
    left: 0;
    transform: translate(0, -50%);
  }
}
.el-descriptions {
  margin-top: 20px;
}
.cell-item {
  display: flex;
  align-items: center;
}
.margin-top {
  margin-top: 20px;
}
</style>
